<template>
  <div class="publicity-overview">
    <div class="chart" id="publicityOverviewBar"></div>
    <div class="chart" id="publicityOverviewLine"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { getRandomData } from '@/utils/utils'
export default {
  name: 'PublicityOverview',
  methods:{
    initChart(){
      const barChart=echarts.init(document.getElementById('publicityOverviewBar'))
      const barOption={
        title:{
          text:'普法宣传',
          textStyle:{
            color:'#22DFE9',
            fontSize:17,
            fontWeight:'bold'
          },
          left:'center',
          top:0
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis:{
          type:'category',
          data:['法律讲座','社区宣传','线上直播','入户宣传','其他活动'],
          axisLabel:{
            color:'#fff'
          },
          axisTick:{
            show:false
          },
          axisLine:{
            show:true,
            lineStyle:{
              color:'#0F4789'
            }
          }
        },
        grid:{
          left:10,
          top:35,
          right:20,
          bottom:10,
          containLabel:true
        },
        yAxis:{
          type:'value',
          axisLabel:{
            color:'#fff'
          },
          splitLine:{
            show:true,
            lineStyle:{
              color:'rgba(77,89,103,0.5)',
              type:'dashed'
            }
          }
        },
        series:[
          {
            type:'bar',
            data:getRandomData(11,3,4),
            showBackground:true,
            barWidth:15,
            backgroundStyle:{
              color:'rgba(49,167,255,0.2)',
              borderRadius:10
            },
            itemStyle:{
              color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#01D2F5',
                },
                {
                  offset: 1,
                  color: '#2393FF',
                }
              ]),
              borderRadius:10
            }
          },
        ]
      }
      barChart.setOption(barOption)
      const lineChart=echarts.init(document.getElementById('publicityOverviewLine'))
      const lineOption={
        title:{
          text:'法律咨询量',
          textStyle:{
            color:'#22DFE9',
            fontSize:17,
            fontWeight:'bold'
          },
          left:'center',
          top:0
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis:{
          type:'category',
          boundaryGap: false,
          data:['1月','2月','3月','4月','5月','6月',],
          axisLabel:{
            color:'#fff'
          },
          axisTick:{
            show:false
          },
          axisLine:{
            show:true,
            lineStyle:{
              color:'#0F4789'
            }
          }
        },
        grid:{
          left:10,
          top:35,
          right:20,
          bottom:0,
          containLabel:true
        },
        yAxis:{
          type:'value',
          axisLabel:{
            color:'#fff'
          },
          splitLine:{
            show:true,
            lineStyle:{
              color:'rgba(77,89,103,0.5)',
              type:'dashed'
            }
          }
        },
        color:['#FBC102'],
        series:[
          {
            type:'line',
            data:getRandomData(50,40,6),
            smooth:true,
            areaStyle:{
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, // 从上到下渐变
                  [
                    { offset: 0, color: 'rgba(251,193,2,0.8)' },
                    { offset: 1, color: 'rgba(251,193,2,0.1)' }
                  ]
              )
            }
          }
        ]
      }
      lineChart.setOption(lineOption)
    }
  },
  mounted() {
    this.initChart()
  }
}
</script>
<style scoped lang="scss">
.publicity-overview{
  width: 100%;
  height: 100%;
  .chart{
    width: 100%;
    height: 50%;
  }
}
</style>
